import { useState, useEffect, useRef } from "react"
import 'leaflet/dist/leaflet.css';
import lessModule from "./index.module.less"
import HomePage_PanoramicMonitoringPage_LayerComponent_ToolComponent from "./component/tool";
import HomePage_PanoramicMonitoringPage_LayerComponent_TooltipComponent from "./component/tooltip";
import HomePage_PanoramicMonitoringPage_LayerComponent_TimeAxisComponent from "./component/timeAxisComponent";
import HomePage_PanoramicMonitoringPage_LayerComponent_ScreenComponent from "./component/screen";
import HomePage_PanoramicMonitoringPage_LayerComponent_MessageComponent from "./component/message";
import HomePage_PanoramicMonitoringPage_LayerComponent_DrawerComponent from "./component/stationModal";
import HomePage_ModalComponent from "../../../../component/modal";
import HomePage_PanoramicMonitoringPage_LayerComponent_StationModalComponent from "./component/stationModal";
import { $EventBus_off, $EventBus_on } from "../../../../../../common/utils";
import HomePage_PanoramicMonitoringPage_LayerComponent_LineModalComponent from "./component/lineModal";


// 主页-全景监控页面-浮层组件

const HomePage_PanoramicMonitoringPage_LayerComponent: React.FC = () => {

    let [isStationModal, setIsStationModal] = useState<boolean>(false)
    let [isLineModal, setIsLineModal] = useState<boolean>(false)
    const mapRealData = useRef<object>({})
    const modalID = useRef<number>(0)
    const [modalData, setModalData] = useState<object>({})
    const [messageList, setMessageList] = useState<Array<object>>([])

    const change_stationCancel = () => {
        modalID.current = 0
        isStationModal = false
        setIsStationModal(isStationModal)
    }
    const change_lineCancel = () => {
        modalID.current = 0
        isLineModal = false
        setIsLineModal(isLineModal)
    }
    // 广播函数数据
    const eventBusFuncData = {
        mapDetailModalOpen: (data: object) => {
            modalID.current = data["data"]["id"]
            if (data["data"]["type"] === "站点") {
                setModalData({ ...mapRealData.current["stationInfo"].find((item: object) => item["id"] === modalID.current) })
                isStationModal = true
                setIsStationModal(isStationModal)
            } else if (data["data"]["type"] === "线路") {
                setModalData({ ...mapRealData.current["lineInfo"].find((item: object) => item["id"] === modalID.current) })
                isLineModal = true
                setIsLineModal(isLineModal)
            }
        },
        mapRealData: (data: object) => {
            mapRealData.current = data["data"]["data"]
            if (isStationModal && modalID.current) {
                setModalData({ ...mapRealData.current["stationInfo"].find((item: object) => item["id"] === modalID.current) })

            }
            if (isLineModal && modalID.current) {
                setModalData({ ...mapRealData.current["lineInfo"].find((item: object) => item["id"] === modalID.current) })

            }
            setMessageList([...mapRealData.current["eventInfo"]])
        }
    }
    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])
    return (
        <div className={lessModule["homePagePanoramicMonitoringPageLayerComponent"]}>
            <HomePage_PanoramicMonitoringPage_LayerComponent_ToolComponent />
            <HomePage_PanoramicMonitoringPage_LayerComponent_TooltipComponent />
            <HomePage_PanoramicMonitoringPage_LayerComponent_TimeAxisComponent />
            <HomePage_PanoramicMonitoringPage_LayerComponent_ScreenComponent />
            <HomePage_PanoramicMonitoringPage_LayerComponent_MessageComponent sourceList={messageList} />
            {
                isStationModal && <HomePage_ModalComponent width={640} change_cancel={change_stationCancel} contentComponent={<HomePage_PanoramicMonitoringPage_LayerComponent_StationModalComponent name={modalData["stationName"]} sourceData={modalData} change_cancel={change_stationCancel} />} />
            }
            {
                isLineModal && <HomePage_ModalComponent width={640} change_cancel={change_lineCancel} contentComponent={<HomePage_PanoramicMonitoringPage_LayerComponent_LineModalComponent name={modalData["line"]} sourceData={modalData} change_cancel={change_lineCancel} />} />
            }
        </div>
    )
}


export default HomePage_PanoramicMonitoringPage_LayerComponent